<template>
  <div>
    <el-row class="gl_searchBox gl_mb_15" :gutter="20">
      <el-col :md="5">
        <p>学员姓名</p>
        <el-input v-model="Api_GET_ClubCheckInLogQO.StudentName" size="mini" clearable placeholder="请输入学员姓名" @change="getinlog()" />
      </el-col>
      <el-col :md="5">
        <p>证件号</p>
        <el-input v-model="Api_GET_ClubCheckInLogQO.IdCardNumber" size="mini" clearable placeholder="请输入证件号" @change="getinlog()" />
      </el-col>
      <el-col :md="4">
        <el-button size="mini" type="primary" style="margin-top:26px" @click="getinlog()">筛选</el-button>
        <el-button size="mini" type="warning" @click="reset()">重置</el-button>
      </el-col>
    </el-row>
    <div>
      <el-table v-loading="tableLoading" class="gl_table_noBorder" :data="tableData">
        <el-table-column type="index" label="序号" align="center" width="55" />
        <el-table-column label="学生姓名" prop="studentName" />
        <el-table-column label="性别" align="center">
          <template slot-scope="{ row }">
            <span>{{ row.genderCode && row.genderCode ? row.genderCode=== 'M' ? '男' : '女': '' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="证件号" prop="idCardNumber" />
        <el-table-column label="应扣课时" prop="deductClassPeriod" />
        <el-table-column label="到课状态">
          <template slot-scope="{ row }">
            {{ row.checkInStatusCode && row.checkInStatusCode ? row.checkInStatusCode === 'Present' ? '已到课' : '未到课': '' }}
          </template>
        </el-table-column>
        <el-table-column label="签退时间">
          <template slot-scope="{ row }">
            <span v-if="row.checkOutTime">
              {{ row.checkOutTime && row.checkOutTime | FormatDate('yyyy-MM-dd HH:mm:ss') }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <span v-if="row.checkOutTime" size="mini" style="color:black;font-size:12px" type="text">{{ '已签退' }}</span>
            <el-button v-else size="mini" type="text" @click="toClass(row)">{{ '签退' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row class="gl_pt_15" style="text-align: right;">
      <el-pagination
        :current-page="Api_GET_ClubCheckInLogQO.Page"
        :page-size="Api_GET_ClubCheckInLogQO.MaxResultCount"
        :total="totalPage"
        layout="total,sizes,prev,pager,next,jumper"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="sizeChange"
        @current-change="pageIndexChange"
      />
    </el-row>
  </div>
</template>

<script>
import { api_GET_ClubCheckInLog, api_POST_ClubCheckInLogIdCheckOut } from '@/extend/api/hallswaggerApi/app.js';
import { Api_GET_ClubCheckInLogQO, CreateCheckInLogInput } from '@/lib/form/hall/swaggerForm';
export default {
  data() {
    return {
      tableLoading: false,
      currentPage: 1,
      CreateCheckInLogInput: new CreateCheckInLogInput(),
      totalPage: 0,
      Api_GET_ClubCheckInLogQO: new Api_GET_ClubCheckInLogQO(),
      tableData: []
    };
  },
  created() {
    this.getinlog();
  },
  methods: {
    getinlog(page) {
      this.tableLoading = true;
      this.Api_GET_ClubCheckInLogQO.CheckInCode = '';
      this.Api_GET_ClubCheckInLogQO.Page = page || 1;
      this.Api_GET_ClubCheckInLogQO.SkipCount = (this.Api_GET_ClubCheckInLogQO.Page - 1) * this.Api_GET_ClubCheckInLogQO.MaxResultCount;
      this.Api_GET_ClubCheckInLogQO.CourseScheduleId = this.$route.query.CourseScheduleId;
      this.Api_GET_ClubCheckInLogQO.CheckInTime = true;
      this.Api_GET_ClubCheckInLogQO.CheckOutTime = '';
      this.Api_GET_ClubCheckInLogQO.StartHour = null; // type: integer
      this.Api_GET_ClubCheckInLogQO.StartMinute = null; // type: integer
      this.Api_GET_ClubCheckInLogQO.EndHour = null; // type: integer
      this.Api_GET_ClubCheckInLogQO.EndMinute = null; // type: integer
      this.Api_GET_ClubCheckInLogQO.StartTime = null; // type: integer
      this.Api_GET_ClubCheckInLogQO.EndTime = null; // type: integer
      api_GET_ClubCheckInLog(this.Api_GET_ClubCheckInLogQO).then(res => {
        this.tableLoading = false;
        this.tableData = res.items;
        this.totalPage = res.totalCount;
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    sizeChange(MaxResultCount) {
      this.Api_GET_ClubCheckInLogQO.MaxResultCount = MaxResultCount;
      this.getinlog();
    },
    pageIndexChange(currentPage) {
      this.getinlog(currentPage);
    },
    toClass(row) {
      this.tableLoading = true;
      api_POST_ClubCheckInLogIdCheckOut(row.checkLogId).then(res => {
        this.$message({
          message: '签退成功',
          type: 'success'
        });
        this.tableLoading = false;
        this.getinlog();
      }, error => {
        this.tableLoading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    reset() {
      this.Api_GET_ClubCheckInLogQO = new Api_GET_ClubCheckInLogQO();
      this.getinlog();
    }
  }

};
</script>

<style lang="scss" scoped>
.date {
    color: black;
    opacity: 65%;
}
</style>

